<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
  <head>
    <title>${requestScope['stackTraceDto']['causeVo']['keyCause']}</title>
	
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<link href="<%=basePath%>css/jquery-ui.min.css" rel="stylesheet">
<link href="<%=basePath%>css/jquery-ui.structure.min.css"
	rel="stylesheet">
<link href="<%=basePath%>css/jquery-ui.theme.min.css" rel="stylesheet">

<script type="text/javascript" src="<%=basePath%>js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery-ui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/jquery.ui.datepicker-zh-TW.js"></script>
<script>

		function getValue(arg){
			console.log(arg);
			var name = '#keyCauseUid' +arg;
			var otherIdname = '#other' +arg;
			var btnIdname = '#newBtn' +arg;
			var modifyBtnIdname = '#modifyBtn' +arg;
			console.log(name);
			var causeUid = $(name).val();
			console.log(causeUid); 
			if(causeUid === '0'){
				$(otherIdname).prop( "disabled", false );
				$(btnIdname).prop( "disabled", false );
				console.log("顯示其他項目"); 
			}else{
				$(otherIdname).prop( "disabled", true );
				$(btnIdname).prop( "disabled", true );
			}
			if(causeUid === "${requestScope['stackTraceDto']['causeVo']['uid']}"  ){
				console.log("不需要有改變"); 
				$(modifyBtnIdname).prop( "disabled", true );
			}else if(causeUid !== '0'){
				console.log("需要有改變"); 
				console.log("只有顯示新增按鈕");
				$(modifyBtnIdname).prop( "disabled", false );
			}else if(causeUid === '0'){
				console.log("需要有新增"); 
				console.log("只有顯示修改按鈕");
				$(modifyBtnIdname).prop( "disabled", true );
			}
		}
		function forward4New(arg) {
			try {
				console.log(arg);
				var originalCauseUid ="${requestScope['stackTraceDto']['causeVo']['uid']}";
				var otherIdname = '#other' +arg;
				var otherText = $(otherIdname).val();				
				console.log("other text :"+otherText);
			    var  url = "stackTracePatternMtn.html";				
				var servletCommand = url;
				$.post(
                    servletCommand,
                            {   
                                "stackTraceUid" : arg,
                                "originalCauseUid" :originalCauseUid,
                                "method" : "new",
                                "otherText" : otherText
                            }, function(data) {
                                console.log(data.name); // John
                                console.log(data.time); //  2pm
                            }, "json");
                            
			} catch (err) {
				console.log(err);
			}
		};
		function forward4Modify(arg) {
			try {
				console.log(arg);
				var name = '#keyCauseUid' +arg;
				var causeUid = $(name).val();
				var otherIdname = '#other' +arg;
				var otherText = $(otherIdname).val();
				var originalCauseUid ="${requestScope['stackTraceDto']['causeVo']['uid']}";
				console.log("other text :"+otherText);
			    var  url = "stackTracePatternMtn.html";				
				var servletCommand = url;
				$.post(
                    servletCommand,
                            {   
                                "stackTraceUid" : arg,
                                "originalCauseUid" :originalCauseUid,
                                "causeUid" :causeUid,
                                "method" : "modify",
                                "otherText" : otherText
                            }, function(data) {
                                console.log(data.name); // John
                                console.log(data.time); //  2pm
                            }, "json");
                            
			} catch (err) {
				console.log(err);
			}
		};
	</script>
  </head>
  <jsp:useBean id="stacTraceBo" class="bo.StacTraceBo" />
  <body>
    原因目前判為: ${requestScope['stackTraceDto']['causeVo']['keyCause']} <br>
    總共: ${requestScope['stackTraceDto'].details.size()}種<br>
    詳細細節如下<br/>
    <c:forEach items="${requestScope['stackTraceDto']['details']}" var="vo" varStatus="item" >
    <form id ="form${vo['uid']}" name="form${vo['uid']}"  >
    第${item.count}種,編號${vo['uid']}[從新判定為
              <select name="keyCauseUid${vo['uid']}" id="keyCauseUid${vo['uid']}"   onchange="getValue(${vo['uid']})"> 
						<c:forEach items="${stacTraceBo.listAllForModify()}" var="option">
							<option value="${option['uid']}"
								${option['uid'] eq requestScope['stackTraceDto']['causeVo']['uid'] ? 'selected="selected"':''}>${option['uid']}. ${option['keyCause']}</option>
						</c:forEach>
				</select>
    	<input type="hidden" id="stackTraceUid" name ="stackTraceUid"   value ="${vo['uid']}"/>
    	<input type="text"   id="other${vo['uid']}"   name="other${vo['uid']}"  disabled="disabled"  />
    	<input type="button"   id="newBtn${vo['uid']}"   name="newBtn${vo['uid']}"  disabled="disabled" value="新增" onclick="forward4New(${vo['uid']})" />
    	<input type="button"   id="modifyBtn${vo['uid']}"   name="modifyBtn${vo['uid']}"  disabled="disabled" value="修改" onclick="forward4Modify(${vo['uid']})" />
    ]----------------------------------------------------------------------<br/>
    ${vo['stacktrace']}
    </form>
    <br/>
    </c:forEach>
  </body>
</html>
